<template>
  <view class="my-page">
    <!-- 用户信息区域 -->
    <view class="user-info" @click="goUserInfo">
      <image class="user-avatar" :src="touxiangUrl"></image>
      <view class="user-name">{{baseInfo.nickName}}</view>
    </view>

    <!-- 订单状态区域 -->
    <view class="order-status">
      <view class="status-item">
        <image src="/images/待付款.png"></image>
        <text>待付款</text>
        <text>0</text>
      </view>
      <view class="status-item">
        <image src="/images/待发货.png"></image>
        <text>待发货</text>
        <text>0</text>
      </view>
      <view class="status-item">
        <image src="/images/待收货.png"></image>
        <text>待收货</text>
        <text>0</text>
      </view>
      <view class="status-item">
        <image src="/images/待评价.png"></image>
        <text>待评价</text>
        <text>0</text>
      </view>
    </view>

    <!-- 常用功能区域 -->
    <view class="function-list">
      <view class="function-item">
        <image src="/images/优惠券.png"></image>
        <text>我的优惠券</text>
      </view>
      <view class="function-item">
        <image src="/images/地址.png"></image>
        <text>收货地址</text>
      </view>
      <view class="function-item">
        <image src="/images/设置.png"></image>
        <text>设置</text>
      </view>
	  <view class="function-item" @click="xiugaiPassword">
	    <image src="/images/修改密码.png"></image>
	    <text>修改密码</text>
	  </view>
    </view>

    <!-- 底部退出登录按钮 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {userInfo} from '../../api/user.js'
import {
		onShow
	} from "@dcloudio/uni-app"
	
	onShow(() => {
		console.log("aaaaaa");
		// 获取列表数据
		getUserInfo();
	})
	let baseInfo=ref({})
	let touxiangUrl=ref("")
	let password=ref('')

// 修改密码
function xiugaiPassword(){
	uni.navigateTo({
		url:"/pages/xiugaiPassWord/xiugaiPassWord?password="+password.value
	})
}

// 获取用户信息
async function getUserInfo(){
	 let r2= await userInfo()
	 console.log(r2.data);
	 baseInfo.value=r2.data.data
	 console.log(baseInfo.value);
	 password.value=baseInfo.value.password
	 console.log(password.value);
	 // console.log(baseInfo.value.avatar);
	 uni.setStorageSync("touxiang",baseInfo.value.avatar)
	touxiangUrl.value=uni.getStorageSync("touxiang")
}

 function goUserInfo(){
	 
	 let {birthday,age,avatar,area,address,nickName,gender} = baseInfo.value
	 let newBaseInfo={birthday,age,area,address,nickName,gender}
	 console.log(newBaseInfo);
	 let userDataInfo=JSON.stringify(newBaseInfo)
	 uni.navigateTo({
		 
	 	url:`/pages/userInfo/userInfo?userData=${userDataInfo}`
 })
 }
// 退出登录函数
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里可以添加退出登录的具体逻辑，如清除缓存、跳转登录页等
        console.log('用户点击确定退出登录');
		uni.navigateTo({
			url:"/pages/login/login"
		})
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
};


</script>

<style scoped>
.my-page {
  background-color: #F8F8F8;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
}

.order-status {
  display: flex;
  justify-content: space-around;
  background-color: #FFFFFF;
  padding: 20px 0;
  border-bottom: 1px solid #EEEEEE;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-item image {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}

.status-item text {
  font-size: 14px;
  color: #666666;
}

.function-list {
  background-color: #FFFFFF;
  margin-top: 10px;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #EEEEEE;
}

.function-item image {
  width: 25px;
  height: 25px;
  margin-right: 15px;
}

.function-item text {
  font-size: 16px;
  color: #333333;
}

.logout-btn {
  margin: 20px;
  background-color: #FF4400;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
}
</style>